<template>
    <div class="content">
      <div class="content-head">
        <el-form :inline="true" :model="formData" label-position="left">
          <el-form-item label="报工日期" label-width="70px" class="form-item">
            <el-date-picker v-model="formData.reportDate" type="daterange" size="mini" value-format="yyyy-MM-dd" :editable="false" range-separator="至" start-placeholder="开始日期" end-placeholder="开始日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="reset_btn">重置</el-button>
            <el-button type="success" size="mini" icon="el-icon-search" @click="search_btn">查询</el-button>
            <el-button type="info" size="mini" icon="el-icon-download" :loading="exportBtnLoading" @click="export_btn">导出</el-button>
            <el-popover v-if="false" placement="right" width="" trigger="click" ref="popover" @show="popoverShowEvent">
              <el-input v-model="salaryTmp" size="mini" @input="validateInputSalary" style="width:200px;" placeholder="请输入单班工资"></el-input>
              <div style="text-align: right; margin: 10px">
                <el-button type="primary" plain size="mini" @click="popoverClearEvent">清空</el-button>
                <el-button type="primary" size="mini" @click="popoverConfirmEvent">确定</el-button>
              </div>
              <el-button slot="reference" type="primary" plain size="mini" icon="el-icon-edit" style="margin-left:10px;">编辑单班工资</el-button>
            </el-popover>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-table">
        <div class="table-date">
          <span class="date-tip">{{ formatDate(formData.reportDate[0], 4) + "至" + formatDate(formData.reportDate[1], 4) + ' ' +  formData.workshop + ' ' }}生产汇总表</span>
        </div>
        <div class="table-main">
          <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" highlight-current-row :max-height="tableMaxHeight" :show-summary="true" :summary-method="getSummaries" class="content-table-item">
            <el-table-column prop="reportTime" label="日期" align="center" width="100"></el-table-column>
            <el-table-column  prop="workShop" label="车间" width="80">
              <template slot-scope="scope" slot="header">
                <table-head-filter v-if="isTeam === 2" label="车间" type="select" :bindData="formData.workshop" :alternativeOption="formData.workshopList" filterField="workshop" @change="filterChangeEvent"></table-head-filter>
                <span v-else>车间</span>
              </template>
            </el-table-column>
            <el-table-column prop="classes" label="班次" align="center" width="80">
              <template slot-scope="scope" slot="header">
                <table-head-filter label="班次" type="select" :bindData="formData.classes" :alternativeOption="formData.classesList" filterField="classes" @change="filterChangeEvent"></table-head-filter>
              </template>
            </el-table-column>
            <el-table-column prop="equipmentType" label="设备类型" align="center" width="100">
              <template slot-scope="scope" slot="header">
                <table-head-filter label="设备类型" type="selectAndSearch" :bindData="formData.workReportType" :alternativeOption="formData.workReportTypeList" filterField="workReportType" @change="filterChangeEvent"></table-head-filter>
              </template>
            </el-table-column>
            <el-table-column prop="machineCode" label="设备编码" align="center" width="80"></el-table-column>
            <el-table-column prop="productNumber" label="生产订单" align="center" width="80"></el-table-column>
            <el-table-column prop="productCode" label="产品编码" align="center" width="100">
              <template slot-scope="scope" slot="header">
                <table-head-filter label="产品编码" type="input" :bindData="formData.productCode" filterField="productCode" @change="filterChangeEvent"></table-head-filter>
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" align="center" width="90"></el-table-column>
            <el-table-column prop="pace" label="节拍" align="center" width="60"></el-table-column>
            <el-table-column prop="targetOEE" label="目标OEE" align="center" width="80"></el-table-column>
            <el-table-column prop="actualOEE" label="实际OEE" align="center" width="80">
              <template slot-scope="{ row, $index }">
                <span :style="{ color: calculateColor(row.targetOEE,row.actualOEE,1) ? '#f00' : '#000'}">{{ row.actualOEE }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="targetOutput" label="目标产出" align="center" width="80"></el-table-column>
            <el-table-column prop="actualOutput" label="实际产出" align="center" width="80"></el-table-column>
            <el-table-column prop="attendanceHours" label="工时" align="center" width="60"></el-table-column>
            <el-table-column prop="workingHours" label="设备运行时长" align="center" width="105"></el-table-column>
            <el-table-column prop="standardManpower" label="标准用工人力" align="center" width="105"></el-table-column>
            <el-table-column prop="actualManpower" label="实际用工人力" align="center" width="105">
              <template slot-scope="{ row, $index }">
                <span :style="{ color: calculateColor(row.standardManpower,row.actualManpower,0) ? '#f00' : '#000'}">{{ row.actualManpower }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="targetUnitCost" label="目标单件成本" align="center" width="120"></el-table-column>
            <el-table-column prop="actualUnitCost" label="实际单件成本" align="center" width="120">
              <template slot-scope="{ row, $index }">
                <span :style="{ color: calculateColor(row.targetUnitCost,row.actualUnitCost,0) ? '#f00' : '#606266'}">{{ row.actualUnitCost }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="isStandard" label="是否达标" align="center" width="100">
              <template slot-scope="scope" slot="header">
                <table-head-filter label="是否达标" type="radio" :bindData="formData.isStandard" :alternativeOption="['不达标','达标']" filterField="isStandard" @change="filterChangeEvent"></table-head-filter>
              </template>
            </el-table-column>
            <el-table-column prop="theoreticalWorkingHours" label="理论工时" align="center" width="100"></el-table-column>
            <el-table-column prop="actualWorkingHours" label="实际工时" align="center" width="100"></el-table-column>
            <el-table-column prop="theoreticalDepreciation" label="理论折旧" align="center" width="100"></el-table-column>
            <el-table-column prop="actualDepreciation" label="实际折旧" align="center" width="100"></el-table-column>
            <el-table-column prop="theoreticalToolCost" label="理论刀具成本" align="center" width="120"></el-table-column>
            <el-table-column prop="actualToolCost" label="实际刀具成本" align="center" width="120"></el-table-column>
            <el-table-column prop="theoreticalUnitToolCost" label="理论刀具单件成本" align="center" width="140"></el-table-column>
            <el-table-column prop="actualUnitToolCost" label="实际刀具单件成本" align="center" width="140"></el-table-column>
            <el-table-column prop="scrapQuantity" label="报废数量" align="center" width="100"></el-table-column>
            <el-table-column prop="laborCostQuantity" label="工废数量" align="center" width="100"></el-table-column>
            <el-table-column prop="materialScrapQuantity" label="料废数量" align="center" width="100"></el-table-column>
            <el-table-column prop="scrapRate" label="报废率" align="center" width="100"></el-table-column>
            <el-table-column prop="" label="停机原因" align="center">
              <el-table-column prop="toolShortage" label="缺刀具" width="" align="center"></el-table-column>
              <el-table-column prop="materialShortage" label="缺料" width="" align="center"></el-table-column>
              <el-table-column prop="toolAbnormalities" label="刀具异常" width="" align="center"></el-table-column>
              <el-table-column prop="waitingChangeover" label="计划停机" width="" align="center"></el-table-column>
              <el-table-column prop="equipmentFailure" label="设备故障" width="" align="center"></el-table-column>
              <el-table-column prop="productChangeover" label="产品换型" width="" align="center"></el-table-column>
              <el-table-column prop="otherReason" label="其它" width="" align="center"></el-table-column>
            </el-table-column>
            <el-table-column prop="operator" label="操作人员" align="center" width="100"></el-table-column>
            <el-table-column prop="singleShiftWage" label="单班工资" align="center" width="100"></el-table-column>
            <el-table-column prop="" label="操作" fixed="right" align="center" width="100">
              <template slot-scope="{ row, $index }">
                <el-button type="text" :disabled="row.isConfirmed || row.isAdmin" @click="examine_btn(row)">{{ row.isConfirmed ? '已查看' : '查看' }}</el-button>
                <!-- <el-button type="text" @click="examine_btn(row)">{{ row.isConfirmed ? '已查看' : '查看' }}</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-footer">
        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,40,80,100,200]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
      </div>
      <!-- dialog -->
      <el-dialog title="查看" :visible.sync="dialogFormVisible" width="40%" @close="dialogFormCancel">
        <el-form :model="dialogFormData" :disabled="true" size="mini" label-width="130px">
          <el-form-item label="部门">
            <el-input v-model="dialogFormData.workShop" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="设备编码">
            <el-input v-model="dialogFormData.machineCode" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-input v-model="dialogFormData.equipmentType" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="工单">
            <el-input  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="产品编码">
            <el-input v-model="dialogFormData.productCode" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="dialogFormData.productName" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="节拍">
            <el-input v-model="dialogFormData.pace" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="单班工资">
            <el-input v-model="dialogFormData.singleShiftWage" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="效率OEE">
            <el-input v-model="dialogFormData.targetOEE" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="目标产出">
            <el-input v-model="dialogFormData.targetOutput" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="工时">
            <el-input v-model="dialogFormData.workingHours" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际产出">
            <el-input v-model="dialogFormData.actualOutput" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际OEE">
            <el-input v-model="dialogFormData.actualOEE" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="标准用工人力">
            <el-input v-model="dialogFormData.standardManpower" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际用工人力">
            <el-input v-model="dialogFormData.actualManpower" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="目标单件成本">
            <el-input v-model="dialogFormData.targetUnitCost" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际单件成本">
            <el-input v-model="dialogFormData.actualUnitCost" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="理论工时">
            <el-input v-model="dialogFormData.theoreticalWorkingHours" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际工时">
            <el-input v-model="dialogFormData.actualWorkingHours" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="理论折旧">
            <el-input v-model="dialogFormData.theoreticalDepreciation" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际折旧">
            <el-input v-model="dialogFormData.actualDepreciation" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="理论刀具成本">
            <el-input v-model="dialogFormData.theoreticalToolCost" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际刀具成本">
            <el-input v-model="dialogFormData.actualToolCost" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="理论刀具单件成本">
            <el-input v-model="dialogFormData.theoreticalUnitToolCost" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="实际刀具单件成本">
            <el-input v-model="dialogFormData.actualUnitToolCost" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="报废数量">
            <el-input v-model="dialogFormData.scrapQuantity" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="报废率">
            <el-input v-model="dialogFormData.scrapRate" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="缺刀具">
            <el-input v-model="dialogFormData.toolShortage"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="缺料">
            <el-input v-model="dialogFormData.materialShortage"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="刀具异常">
            <el-input v-model="dialogFormData.toolAbnormalities"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="等待换型">
            <el-input v-model="dialogFormData.waitingChangeover"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="设备故障">
            <el-input v-model="dialogFormData.equipmentFailure"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="产品换型">
            <el-input v-model="dialogFormData.productChangeover"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="其它">
            <el-input v-model="dialogFormData.otherReason"  autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="操作人员">
            <el-input v-model="dialogFormData.operator" autocomplete="off" style="width:90%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="dialogFormConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { reqOeeStatementList, reqOeeStatementExcel, reqClassesList, reqUpdateOeeStatement, reqCheckIsTeam, reqUpdateSalary } from "@/api/workOrder.js";
  import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
  import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
  export default {
    name:"oeeStatement",  //生产汇总表
    components:{
      TableHeadFilter
    },
    data() {
      return {
        formData:{
          reportDate:[this.formatDate(new Date(),1),this.formatDate(new Date(),1)],
          workshop:"",  //车间
          workshopList:["装配线","机加工","走心机"],
          classes:"",
          classesList:[],
          productCode:"",
          isStandard:"",
          workReportType:"",
          workReportTypeList:["装配1线","装配二线","装配2线","装配3线","装配4线","装配5线","装配6线","装配7线","热处理","车床","铣床","倒角","清洗机"]
        },
        tableData:[],
        currentPage:1,
        pageSize:100,
        total:0,
        tableLoading:false,
        exportBtnLoading:false,
        tableMaxHeight:450,
        confirmButtonState:0,  // 0-未阅 1-已阅
        dialogFormVisible:false,
        dialogFormData:{
          reportTime:"",
          workShop:"",
          machineCode:"",
          equipmentType:"",
          productCode:"",
          productName:"",
          pace:"",
          singleShiftWage:"",
          targetOEE:"",
          targetOutput:"",
          workingHours:"",
          actualOutput:"",
          actualOEE:"",
          standardManpower:"",
          actualManpower:"",
          targetUnitCost:"",
          actualUnitCost:"",
          theoreticalWorkingHours:"",
          actualWorkingHours:"",
          theoreticalDepreciation:"",
          actualDepreciation:"",
          theoreticalToolCost:"",
          actualToolCost:"",
          theoreticalUnitToolCost:"",
          actualUnitToolCost:"",
          scrapQuantity:"",
          scrapRate:"",
          toolShortage:"",
          materialShortage:"",
          toolAbnormalities:"",
          waitingChangeover:"",
          equipmentFailure:"",
          productChangeover:"",
          otherReason:"",
          operator:"",
          teamName:"",
          classes:""
        },
        isTeam:2,  // 0-普通员工 1-班长 2-管理员
        salaryTmp:"",
        salary:""
      }
    },
    mounted(){
      //精致环境下进行自动旋转
      autoOrientation();
      this.getOeeStatementList();
      document.title = "生产汇总表";
      this.calculateTableMaxHeight();
      setTimeout(() => {
        this.getClassList();
        this.getIsTeam();
      },300);
      window.addEventListener("resize",this.calculateTableMaxHeight);
    },
    beforeDestroy(){
      window.removeEventListener("resize",this.calculateTableMaxHeight);
    },
    methods:{
      //分页获取报工列表信息
      async getOeeStatementList () {
        this.tableLoading = true;
        const { workshop, reportDate, classes, productCode, isStandard, workReportType } = this.formData;
        const parameter = { page:this.currentPage,size:this.pageSize,startDate:reportDate[0], endDate:reportDate[1], workShop:workshop, classes, productCode, isStandard:(isStandard === 1 || isStandard === 0) ? (isStandard === 0 ? '否' : '是') : "", workReportType };
        reqOeeStatementList(parameter).then(res => {
          if(res.data.code === 200){
            this.tableData = res.data.data.content.map(item => {
              item.toolShortage = item.toolShortage ? item.toolShortage + 'h' : '';
              item.materialShortage = item.materialShortage ? item.materialShortage + 'h' : '';
              item.toolAbnormalities = item.toolAbnormalities ? item.toolAbnormalities + 'h' : '';
              item.waitingChangeover = item.waitingChangeover ? item.waitingChangeover + 'h' : '';
              item.equipmentFailure = item.equipmentFailure ? item.equipmentFailure + 'h' : '';
              item.productChangeover = item.productChangeover ? item.productChangeover + 'h' : '';
              item.otherReason = item.otherReason ? item.otherReason + 'h' : '';
              return item;
            });
            this.total = res.data.data.totalElements;
          }
          this.tableLoading = false;
          console.log("分页获取oee报表信息",res);
        }).catch(err => {
          console.log('分页获取oee报表信息',err);
          this.$message({type:"error",message:"列表数据获取失败"});
          this.tableLoading = false;
        })
      },
      getIsTeam(){
        reqCheckIsTeam().then(response => {
          if(response.data.code === 200){
            this.isTeam = response.data.data;
          }
          console.log('是否为班组api',response);
        }).catch(error => {
          console.log('是否为班组api',error);
        })
      },
      getClassList(){
        reqClassesList().then(response => {
          if(response.data.code === 200){
            this.formData.classesList = response.data.data.map(item => {
              return item.shiftType;
            });
          }
          console.log('获取班次信息api',response);
        }).catch(error => {
          this.$message({type:"error",message:"班次数据获取失败"});
          console.log('获取班次信息api',error);
        })
      },
      //查询重置导出按钮
      search_btn(){
        const { workshop, reportDate, classes, productCode } = this.formData;
        if(reportDate.length !== 2){
          this.$message({type:"warning",message:"请先选择报工日期"});
          return;
        }
        this.currentPage = 1;
        this.pageSize = 100;
        this.getOeeStatementList();
      },
      reset_btn(){
        this.formData.workshop = "";
        this.formData.reportDate = [this.formatDate(new Date(),1),this.formatDate(new Date(),1)];
        this.formData.classes = "";
        this.formData.productCode = "";
        this.currentPage = 1;
        this.pageSize = 20;
        this.getOeeStatementList();
      },
      export_btn() {
        const { reportDate, workshop, classes, productCode, workReportType} = this.formData;
        const parameter = {startDate:reportDate[0],endDate:reportDate[1],workShop:workshop,classes,productCode, workReportType};
        if(reportDate.length !== 2){
          this.$message({type:"warning",message:"请选择日期后再进行报表数据下载"});
          return;
        }
        this.$confirm('即将导出当前数据内容(内容将根据相关筛选条件进行过滤', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
          .then(async () => {
              this.exportBtnLoading = true;
              let res = await reqOeeStatementExcel(parameter);
              if (res.status === 200) {
                  let blob = res.data;
                  let url = window.URL.createObjectURL(blob,{type: 'application/zip'});
                  const aLink = document.createElement('a');
                  aLink.href = url;
                  let timestamp = new Date().getTime();
                  aLink.setAttribute('download', reportDate + workshop+'生产汇总报表_' + timestamp);
                  document.body.appendChild(aLink);
                  aLink.click();
                  document.body.removeChild(aLink);
                  this.$message.success('导出成功');
                  this.exportBtnLoading = false;
              } else {
                  this.$message.error('导出失败,请重试');
                  this.exportBtnLoading = false;
              }
            console.log('oee报表导出api',res);
          }).catch((error) => {
            console.log("oee报表导出error:",error);
            this.$message({type: 'info', message: '已取消导出!'});
            this.exportBtnLoading = false;          
          });
      },
      examine_btn(row){
        const formData = this.dialogFormData;
        const keyList = [];
        for(let k in formData){
          keyList.push(k);
        }
        keyList.forEach((key,index) => {
          formData[key] = row[key];
        })
        this.dialogFormVisible = true;
      },
      dialogFormCancel(){
        this.dialogFormVisible = false;
        const formData = this.dialogFormData;
        const keyList = [];
        for(let k in formData){
          keyList.push(k);
        }
        keyList.forEach((key,index) => {
          formData[key] = "";
        })
      },
      dialogFormConfirm(){
        const { reportTime,productCode,teamName,classes } = this.dialogFormData;
        const parameter = {reportTime,productModel:productCode,teamName,shift:classes,isConfirmed:true};
        reqUpdateOeeStatement(parameter).then(response => {
          if(response.data.code === 200){
            this.dialogFormCancel();
            this.getOeeStatementList();
            this.$message({type:"success",message:"已确认查看"});
          }
          console.log('更新生产汇总表api',response);
        }).catch(error => {
          this.$message({type:"error",message:"确认出错，请重试"});
          console.log('更新oee生产汇总表api',error);
        })
      },
      //分页器
      handleCurrentChange(curPage){
        this.currentPage = curPage;
        //重新获取数据
        this.getOeeStatementList();
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        //重新获取数据
        this.getOeeStatementList();
      },
      calculateTableMaxHeight(){
        const dom = document.querySelector(".table-main");
        this.$nextTick(() => {
          this.tableMaxHeight = dom.offsetHeight - 10;
        })
      },
      confirmReaded(){
        this.confirmButtonState = 1;
      },
      //格式化时间
      formatDate(val,type){
        let date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if(type === 0){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 1){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day);
        } else if (type === 2){
            return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
        } else if (type === 3){
            return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
        } else if (type === 4){
          return year + "年" + this.addZero(month) + "月" + this.addZero(day) + "日";
        }
      },
      addZero(val){
        return val > 9 ? val : "0" + val;
      },
      //tableHeadFiler的change事件
      filterChangeEvent(parameter){
        const { state, filterField, selectedValue } = parameter;
        if(state === 'clear'){
          //清空操作
          if(this.formData[filterField] !== ""){
            this.formData[filterField] = "";
            this.search_btn();
          }
        }
        if(state === 'confirm'){
          //确定操作
          this.formData[filterField] = selectedValue;
          if(selectedValue !== ""){
            this.search_btn();
          }
        }
      },
      getSummaries(parameter) {
        const {columns, data} = parameter;
        const calculateList = new Array();
        const array = ["reportTime","workShop","classes","equipmentType","productNumber","productCode","productName","operator","isStandard"];
        const columnFieldName = ["standardManpower","actualManpower"];
        for(let col = 0; col < columns.length; col ++){
          let calculateListValue = null;
          if(!array.includes(columns[col].property) && columns[col].property){
            let columnSign = "";
            const tmp = data.map(v => {
              const str = v[columns[col].property];
              if(!(str === null || str === "" || str === undefined)){
                const strNumber = str.replace(/[^\d.]/g, '');
                //处理列符号
                const tmp = str.match(/[^0-9.]/g);
                tmp && (tmp.includes("%") || tmp.includes("￥") || tmp.includes("h")) ? columnSign = tmp[0] : "";
                return parseFloat(strNumber);
              } else {
                return 0;
              }
            });
            const count = tmp.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            const columnField = columns[col].property;
            if(columnSign.includes('%')){
              calculateListValue = (count / data.length).toFixed(2) + columnSign;
            } else if(columnSign.includes('￥')) {
              calculateListValue = columnSign + count.toFixed(2);
            } else if(columnSign.includes('h')){
              calculateListValue = count.toFixed(1) + columnSign;
            } else {
              calculateListValue = columnFieldName.includes(columnField) ? count.toFixed(3) : count.toFixed(2);
            }
            calculateList.push(calculateListValue);
          } else {
            col === 0 ? calculateList.push("合计") : calculateList.push("");
          }

        }
        return calculateList;
      },
      calculateColor(value1,value2,type){
        //type 1:OEE
        //type 0:单件成本
        const val1 = value1 === null ? 'aaa' : value1;  //目标
        const val2 = value2 === null ? 'aaa' : value2;  //实际
        if(val1 && val2 && type === 0){
          return Number(val2.replace(/[^\d.]/g, '')) > Number(val1.replace(/[^\d.]/g, ''));
        } else if(val1 && val2 && type === 1) {
          return Number(val1.replace(/[^\d.]/g, '')) > Number(val2.replace(/[^\d.]/g, ''));
        } else {
          return false;
        }
      },
      popoverShowEvent(){
        this.salaryTmp = this.salary;
      },
      popoverClearEvent(){
        this.salaryTmp = "";
        this.salary = "";
        this.$refs.popover.doClose();
      },
      popoverConfirmEvent(){
        this.salary = this.salaryTmp;
        this.$refs.popover.doClose();
        reqUpdateSalary(this.salary).then(response => {
          if(response.data.code === 200){
            this.$message({type:"success",message:"单班工资编辑成功"});
            this.getOeeStatementList();
          }
          console.log('更新单班工资api',response);
        }).catch(error => {
          console.log('更新单班工资api',error);
        })
      },
      validateInputSalary() {
        const inputValue = this.salaryTmp;
        const regex = /^\d+(\.\d{0,2})?$/;
        if (!regex.test(inputValue) && inputValue !== '') {
            this.salaryTmp = inputValue.slice(0, -1);
        }
      }
    }
  }
  </script>
  
<style lang='scss' scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  box-sizing: border-box;
  user-select: none;

  .content-head{
    flex: 0.5;
    .form-item{
      margin-right: 2vw;
    }
  }
  .content-table{
    flex: 8;
    margin: 10px 0;
    .table-date{
      width: 100%;
      height: 2%;
      min-height: 15px;
      margin-bottom: 0.5%;
      display: flex;
      justify-content: right;
    }
    .table-main{
      width: 100%;
      height: 98%;
    }
  }
  .content-footer{
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
  }
}
::v-deep .el-table__header th {
  padding: 0; /* 调整上下内边距 */
}
::v-deep .el-table__row {
  margin-bottom: 15px; /* 调整这个值来改变行间距 */
}
::v-deep .el-table .el-table__cell{
  padding: 0;
}
</style>